<template>
  <div class="container">
    <div class="chouzhenView">
      <a-card class="card card1" :bordered="false">
        <a-button type="primary" @click="back">返回上一页</a-button>
      </a-card>
      <a-card title="抽帧图片" :bordered="false">
        <a-space>
          <a-button type="primary" :loading="load" v-if="is_check" @click="goUpload(check_id)">上传选中图片</a-button>
          <a-button type="primary" v-else disabled>上传选中图片</a-button>
        </a-space>
        <div class="picView">
          <vue-waterfall-easy :width='780' :imgsArr="list" srcKey="url" hrefKey="posterId" :loadingDotCount='loadingDotCount' @click="clickFn" @preloaded="preloaded" linkRange='custom' isRouterLink>
            <div slot-scope="item">
              <div class="img-info acea-row row-column">
                <span class="img-info-item line1">{{item.value.width}}*{{item.value.height}}</span>
              </div>
              <a-checkbox class="img-checkBox" :checked="item.value.is_check" @click="imgClick(item.value.posterId)"></a-checkbox>
            </div>
          </vue-waterfall-easy>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script>
import vueWaterfallEasy from 'vue-waterfall-easy'
import { getVideoExtractImage,addCropImage,uploadImage } from '@/api/xinxiliu/getBaidu'
export default {
  data() {
    return {
      list:[],
      loadingDotCount:3,
      check_id:[],
      is_check:false,
      load:false,
    }
  },
  created(){
    let videoId = this.$route.query.videoId
    console.log('chouzhen-create',videoId)
    if(videoId){
      this.getData(videoId)
    }
  },
  methods:{
    getData(videoId){
      let params = {
        videoId,
      }
      getVideoExtractImage(params).then((res) => {
        console.log(res)
        let list = []
        if(res.errcode == 0){
          for(let i of res.data.body.data[0].listData){
            i.is_check = false
            list.push(i)
          }
          this.list = list
        }
      });
    },
    cropImage(arr){
      let promisrArr = []
      for(let pic of arr){
        if(pic.width < pic.height && (pic.width != 640 || pic.height != 1140)){
          promisrArr.push({func:this.addCropImagefunc,width:640,height:1140,url:pic.url})
        }
        if(pic.width > pic.height && (pic.width != 1140 || pic.height != 640)){
          promisrArr.push({func:this.addCropImagefunc,width:1140,height:640,url:pic.url})
        }
      }
      let mypromisrArr = promisrArr.map(e=>{
        return e.func({width:e.width,height:e.height,srcUrl:e.url}) 
      })
      Promise.all(mypromisrArr).then((res) => {
        let urlArr = []
        for(let i of res){
          urlArr.push(i.url)
        }
        this.goUpload(urlArr,2)
      });
    },
    goUpload(imageUrlArr,mod=1){
      this.load = true
      let arr = imageUrlArr
      uploadImage({imageUrl:arr}).then((res) => {
        if(res.errcode == 0){
          let arr = res.data.body.data
          if(mod == 1){
            this.cropImage(arr)
          }else{
            this.load = false
          }
        }
      }).catch(()=>{
        this.load = false
      });
    },
    addCropImagefunc(params){
      return new Promise((resolve) => {
        addCropImage(params).then((res) => {
          console.log('1231',res)
          if(res.errcode == 0){
            resolve(res.data.body.data[0])
          }
        });
      });
    },
    clickFn(event, { index, value }){
      console.log('img clicked')
      // 阻止a标签跳转
      event.preventDefault()
      // 只有当点击到图片时才进行操作
      if (event.target.tagName.toLowerCase() == 'img') {
        console.log('img clicked',index, value)
        this.imgClick(value.posterId)
      }
    },
    imgClick(posterId){
      let check_id = []
      for(let i of this.list){
        if(i.posterId == posterId){
          i.is_check = !i.is_check
        }
        if(i.is_check){
          check_id.push(i.url)
        }
      }
      if(check_id.length > 0){
        this.is_check = true
      }else{
        this.is_check = false
      }
      this.check_id = check_id
    },
    preloaded(){
      this.loadingDotCount = 0
      setTimeout(() => {
        let alink = document.getElementsByClassName('alink')
        for(let i of alink){
          i.href = 'javascript:;'
        }
      }, 0);
    },
    back(){
      this.$router.go(-1)
    }
  },
  components:{
    vueWaterfallEasy,
  }
}
</script>

<style lang="less" scoped>
  .container{
    background-color: #f0f2f5;
    height: 100vh;
    .chouzhenView{
      margin: auto;
      width: 860px;
      padding: 20px 0;
    }
    .card1{
      margin-bottom: 20px;
    }
    .picView{
      width: 780px;
      height: 600px;
      margin: 20px auto 0;
    }
  }
  .img-info{
    width: 100%;
    display: block;
    padding: 5px 10px;
    color: #222222;
  }
  .img-checkBox{
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
  }
  .img-info-item{
    margin-bottom: 0px;
    width: 100%;
    display: block;
  }
  .img-info-item:last-of-type{
    margin-bottom: 0;
  }
</style>